import { Tag, Input, message } from 'antd'
import { TweenOneGroup } from 'rc-tween-one'
import { PlusOutlined } from '@ant-design/icons'
import React, { ChangeEvent, useEffect, useRef, useState } from 'react'

export default function AddTags(props: any) {
  let limit: number = 10
  let limitLength: number = 8
  let nowTags: string = props.tags

  const [tags, setTags] = useState<string[]>(
    nowTags.split(',').filter((tag) => tag !== ''),
  )
  const [inputVisible, setInputVisible] = useState<boolean>(false)
  const [inputValue, setInputValue] = useState<string>('')

  const { getTags } = props

  const inputRef = useRef<Input>(null)

  let tagChile = tags.map(forMap)

  useEffect(() => {
    if (inputRef.current !== null) inputRef.current.focus()
  }, [inputVisible])

  function handleClose(removedTag: string) {
    let inputTags: string[] = tags.filter((tag) => tag !== removedTag)
    setTags(inputTags)
    getTags(inputTags)
  }

  function showInput() {
    setInputVisible(true)
    if (inputRef.current !== null) inputRef.current.focus()
  }

  function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
    if (e.target.value.length <= limitLength) {
      setInputValue(e.target.value)
    } else {
      setInputValue(e.target.value.slice(0, limitLength))
      message.destroy()
      message.error(`标签长度不能超过${limitLength}个字符`)
    }
  }

  function handleInputConfirm() {
    let newTags: string[] = tags
    if (inputValue && newTags.indexOf(inputValue) === -1) {
      newTags = [...newTags, inputValue]
    } else {
      message.destroy()
      message.error('该标签已存在')
    }
    if (newTags.length <= limit) {
      setTags(newTags)
      getTags(newTags)
    } else {
      message.destroy()
      message.error(`标签不能超过${limit}个`)
    }
    setInputVisible(false)
    setInputValue('')
  }

  function forMap(tag: string) {
    let tagElem = (
      <Tag
        color={'success'}
        closable
        onClose={(e) => {
          e.preventDefault()
          handleClose(tag)
        }}>
        {tag}
      </Tag>
    )
    return (
      <span key={tag} style={{ display: 'inline-block' }}>
        {tagElem}
      </span>
    )
  }

  return (
    <div style={{ width: '50%' }}>
      <div style={{ marginBottom: 16 }}>
        <TweenOneGroup
          enter={{
            scale: 0.8,
            opacity: 0,
            type: 'from',
            duration: 100,
          }}
          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
          appear={false}>
          {tagChile}
        </TweenOneGroup>
      </div>
      {inputVisible && (
        <Input
          ref={inputRef}
          type="text"
          size="small"
          style={{ width: 78 }}
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputConfirm}
          onPressEnter={handleInputConfirm}
        />
      )}
      {!inputVisible && (
        <Tag onClick={showInput} color={'processing'} className="site-tag-plus">
          <PlusOutlined /> 添加新的标签
        </Tag>
      )}
    </div>
  )
}
